<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <title>lite-view</title>
    <style>
        a {
            padding-left: 20px;
        }

        th, td {
            text-align: center;
            max-width: 200px;
            overflow: hidden;
            white-space: nowrap;
            padding: 5px 10px 5px 10px;
        }
    </style>
</head>
<body>

<div>
    <input id="order_tb" type="file" style="display: none"/>
    <label for="order_tb" style="border: 1px solid">上传订单表</label>

    <input id="deliver_tb" type="file" style="display: none"/>
    <label for="deliver_tb" style="border: 1px solid">上传发货表</label>
</div>
<div id="app">
    <div style="margin-top: 20px;">

        <input v-model="order_sn" placeholder="订单号">

        <select v-model="has_order">
            <option value="">匹配订单</option>
            <option value="1">是</option>
            <option value="2">否</option>
        </select>
        <select v-model="type">
            <option value="">全部类型</option>
            <option v-for="_t in all_type">{{_t}}</option>
        </select>

        <input type="date" v-model="day_date">

        <input type="button" value="确定" @click="search_list">
        <input type="button" value="重置" @click="search_reset">
        <input type="button" value="导出" @click="search_down">
    </div>
    <div>表格</div>
    <div>
        <table border="1">
            <thead>
            <tr>
                <th v-for="one in tb_title">{{one.title}}</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="row in data">
                <td v-for="v in tb_title">{{ view(row, v) }}</td>
            </tr>
            </tbody>
        </table>
    </div>
    <div>数据总条数：{{paging.total}}，共{{paging.pageCount}}页，当前第<input type="text" value="1" v-model="current_page" @change="search_list">页，每页显示<input type="text" value="10" v-model="limit" @change="search_list">条</div>
    <div>当前条件下订单总额：{{sum}}</div>

    <div id="tip" style="display: none; width:400px; height:400px;position: fixed;left:0;top:0; bottom: 0;right: 0; margin:auto;color: red">处理中请稍等。。。</div>
</div>


<script src="https://songcj.com/html/vue/vue.global.js"></script>
<script src="https://songcj.com/html/vue/axios.min.js"></script>
<script>
    const {createApp, ref, onMounted} = Vue

    var app = createApp({
        setup() {
            const current_page = ref('');

            const order_sn = ref('');
            const has_order = ref('');
            const day_date = ref('');
            const type = ref('');

            const sum = ref('');
            const message = ref('');

            const tb_title = ref([]);

            const data = ref([]);
            const paging = ref([]);
            const all_type = ref([]);

            const limit = ref('10');

            onMounted(() => {
                console.log('onMounted');
            });

            return {
                current_page,

                order_sn,
                has_order,
                day_date,
                type,

                sum,
                message,
                data,
                paging,
                all_type,

                limit,

                tb_title
            }
        },

        created() {
            // 添加全局的键盘事件监听器
            window.addEventListener('keydown', this.handleKeyDown);
            //
            this.load_data();
        },

        methods: {
            view(row, one) {
                return row[one['field']];
            },

            handleKeyDown(event) {
                // 获取按下的键的键码
                const keyCode = event.keyCode;
                console.log(keyCode);
            },

            load_data() {
                let that = this;
                if (!that.current_page) {
                    that.current_page = 1;
                }
                axios.get(`/tao/data?type=${that.type}&order_sn=${that.order_sn}&has_order=${that.has_order}&day_date=${that.day_date}&page=${that.current_page}&limit=${that.limit}`)
                    .then(function (response) {
                        // 处理成功情况
                        console.log(response);
                        that.data = response.data.data.list;
                        that.paging = response.data.data.paging;
                        that.tb_title = response.data.tb;
                        that.all_type = response.data.all_type;

                        that.sum = response.data.sum;
                    })
                    .catch(function (error) {
                        // 处理错误情况
                        console.log(error);
                    })
                    .finally(function () {
                        // 总是会执行
                    });
            },

            search_list() {
                this.load_data();
            },
            search_reset() {
                this.order_sn = '';
                this.has_order = '';
                this.day_date = '';
                this.type = '';
                this.current_page = 1;
                this.load_data();
            },
            search_down() {
                window.open(`/tao/data?order_sn=${this.order_sn}&has_order=${this.has_order}&day_date=${this.day_date}&limit=100000`)
            }
        }
    });
    app.mount('#app');

</script>
<script type="text/javascript">
    document.getElementById('deliver_tb').addEventListener('change', function () {
        let handle = new fileupload(this);
        document.getElementById('tip').style.display = 'block';
        handle.uploadData('/tao/up/deliver_tb',
            {
                done: function (res) {
                    // console.log(res.target.responseText);
                    var resp = JSON.parse(res.target.responseText);
                    // console.log(resp);
                    document.getElementById('tip').style.display = 'none';
                    alert(resp.msg);
                }
            }
        );
    });


    document.getElementById('order_tb').addEventListener('change', function () {
        let handle = new fileupload(this);
        document.getElementById('tip').style.display = 'block';
        handle.uploadData('/tao/up/order_tb',
            {
                done: function (res) {
                    // console.log(res.target.responseText);
                    var resp = JSON.parse(res.target.responseText);
                    // console.log(resp);
                    document.getElementById('tip').style.display = 'none';
                    alert(resp.msg);
                }
            }
        );
    });
</script>
<script>
    function fileupload(fileElement) {
        'use strict';
        this.file = fileElement.files[0];
        this.filesize = 0;
        if (this.file.size > 1024 * 1024 * 1024) {
            this.filesize = Math.round(this.file.size * 100 / (1024 * 1024 * 1024)) / 100 + 'GB';
        } else if (this.file.size > 1024 * 1024) {
            this.filesize = Math.round(this.file.size * 100 / (1024 * 1024)) / 100 + 'MB';
        } else {
            this.filesize = Math.round(this.file.size * 100 / 1024) / 100 + 'KB';
        }
        console.log('文件名：' + this.file.name + ';文件大小：' + this.filesize + ';文件类型：' + this.file.type);

        //准备数据并上传
        this.getFileData = function () {
            var fileData = new FormData();
            fileData.append('file', this.file);
            return fileData;
        };

        //发送数据到服务器
        this.uploadData = function (url, Listener) {
            var fd = this.getFileData();
            var xhr = new XMLHttpRequest();
            //下面应该是添加事件
            if (Listener.progress) {
                this.uploadProgress = Listener.progress;
            }
            if (Listener.done) {
                this.uploadComplete = Listener.done;
            }
            if (Listener.error) {
                this.uploadFailed = Listener.error;
            }
            if (Listener.abort) {
                this.uploadCanceled = Listener.abort;
            }
            xhr.upload.addEventListener("progress", this.uploadProgress, false);
            xhr.addEventListener("load", this.uploadComplete, false);
            xhr.addEventListener("error", this.uploadFailed, false);
            xhr.addEventListener("abort", this.uploadCanceled, false);
            xhr.open("POST", url);
            xhr.send(fd);
        };

        //进度提示
        this.uploadProgress = function (evt) {
            if (evt.lengthComputable) {
                var percentComplete = Math.round(evt.loaded * 100 / evt.total);
                console.log(percentComplete.toString() + '%');
            } else {
                console.log('unable to compute');
            }
        };

        //请求完成后的事件
        this.uploadComplete = function (evt) {
            /* This event is raised when the server send back a response */
            //alert(evt.target.responseText);
        };

        //请求失败事件
        this.uploadFailed = function (evt) {
            alert("There was an error attempting to upload the file.");
        };

        //请求取消事件
        this.uploadCanceled = function (evt) {
            alert("The upload has been canceled by the user or the browser dropped the connection.");
        };
    }
</script>
</body>
</html>